<script lang="ts" setup>
import { ref } from 'vue'
import { Sidebar, SidebarItem, Tab, Tabs } from 'vant'
import lodash from 'lodash'
import { useSessionStorage } from '@vueuse/core'
import { PricePolicyModel } from '~/model/PricePolicyModel'
import { PricePolicyApi } from '~/api/PricePolicyApi'
import Empty from '~/components/Empty.vue'
import { MaterialModel } from '~/model/MaterialModel'

const route = useRoute()
const router = useRouter()

const ppRecords = ref([] as PricePolicyModel[])

onMounted(() => {
  PricePolicyApi.getAll().then((data) => {
    ppRecords.value = data
  })
})

type SidebarListGetter = (arr: PricePolicyModel[]) => string[]

function _getFullName(material: MaterialModel): string {
  return `${material.name}(${material.specification})`
}

const tabIndex = useSessionStorage('price_policy-tabIndex', 0)
const tabList = [
  {
    title: '按商品',
    sidebarListGetter: (arr: PricePolicyModel[]) => {
      const res = arr.map(x => _getFullName(x.product!))
      return Array.from(new Set(res)).map(x => ({ title: x }))
    },
  },
  {
    title: '按用户',
    sidebarListGetter: (arr: PricePolicyModel[]) => {
      // const res = arr.map(x => x.consumer?.name)
      const group = lodash.groupBy(arr, x => `${x.consumer?.name}%%%%%${x.consumer?.id}`)
      console.log(group)

      return Object.keys(group).map((x) => {
        const a = x.split('%%%%%')
        return {
          title: a[0],
          id: Number.parseInt(a[1]),
        }
      })
    },
  },
]

const sidebarIndex = useSessionStorage('price_policy-sidebarIndex', 0)
const sidebarList = computed(() => {
  return tabList[tabIndex.value].sidebarListGetter(ppRecords.value)
})

watch(sidebarIndex, () => {
  if (sidebarIndex.value >= sidebarList.value.length && sidebarList.value.length !== 0) {
    sidebarIndex.value = 0
  }
})

watch(tabIndex, () => {
  sidebarIndex.value = 0
})

const ppRecordsFiltered = computed(() => {
  if (tabIndex.value === 0) {
    // 按商品
    const chosen = sidebarList.value[sidebarIndex.value].title
    return ppRecords.value.filter((x) => {
      return `${x.product?.name}(${x.product?.specification})` === chosen
    })
  }
  else {
    const chosen = (sidebarList.value[sidebarIndex.value] as any).id
    // 按用户
    return ppRecords.value.filter((x) => {
      return x.consumer?.id === chosen
    })
  }
})

function goCreate() {
  router.push('/price_policys/detail?id=0')
}

function clickRow(row: PricePolicyModel) {
  router.push(`/price_policys/detail?id=${row.id}`)
}
</script>

<template>
  <div h-screen flex flex-col>
    <!-- <div flex items-center justify-center h-3rem bg-white>
      <div pl @click="$router.back()" w="33%">
        <font-awesome-icon h-5 :icon="['fas', 'angle-left']" />
      </div>
      <div  w="33%" text-center>价格策略</div>
      <div w="33%" text-right pr>
        <font-awesome-icon h-5 :icon="['fas', 'ellipsis-vertical']" />
      </div>
    </div> -->
    <el-menu
      class="el-menu-demo"
      mode="horizontal"
      :ellipsis="false"
    >
      <div flex items-center justify-center px>
        价格策略
      </div>
      <!-- <el-menu-item index="0">
        <div>价格策略</div>
      </el-menu-item> -->
      <div class="flex flex-1" />
      <el-sub-menu
        index="2"
        :expand-close-icon="Empty"
        :expand-open-icon="Empty"
        :collapse-close-icon="Empty"
        :collapse-open-icon="Empty"
        :show-timeout="0"
        :hide-timeout="0"
      >
        <template #title>
          <font-awesome-icon h-5 :icon="['fas', 'ellipsis-vertical']" />
        </template>
        <el-menu-item index="2-1" @click="goCreate">
          新条目
        </el-menu-item>
      </el-sub-menu>
    </el-menu>

    <Tabs v-model:active="tabIndex" b-b="1px solid #33333333">
      <Tab v-for="(item, index) in tabList" :key="index" :title="item.title" />
    </Tabs>
    <div flex flex-1 overflow-hidden>
      <div self-stretch bg-white overflow-auto>
        <Sidebar v-model="sidebarIndex">
          <SidebarItem
            v-for="(item, index) in sidebarList" :key="index" :title="item.title"
          />
        </Sidebar>
      </div>
      <div v-if="ppRecords.length" flex-1 overflow-auto>
        <el-table
          :data="ppRecordsFiltered" border style="width: 100%"
          @row-click="clickRow"
        >
          <el-table-column v-if="tabIndex === 0" prop="consumer.name" label="用户" />
          <el-table-column v-if="tabIndex === 1" label="商品">
            <template #default="scope">
              <span>{{ `${scope.row.product.name}(${scope.row.product.specification})` }}</span>
            </template>
          </el-table-column>
          <el-table-column label="价格">
            <template #default="scope">
              <span>{{ scope.row.price }}{{ scope.row.note ? `(${scope.row.note})` : '' }}</span>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
  </div>
</template>

<style scoped>

</style>
